<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="list">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
        <li>item 6</li>
        <li>item 7</li>
        <li>item 8</li>
    </ul>

    <input type="button" name="" id="btn" value="添加" />
    <ul id="ul1">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    </ul>
    <script>
        // 事件代理又叫事件委托--会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层
        // 元素，而不是目标元素
        // 打个比方 ⽐如⼀个宿舍的同学同时快递到了，⼀种笨⽅法就是他们⼀个个去领取,较优⽅法就是把这件事情委托给宿舍⻓，让⼀个⼈出去拿好所有快递，然后再根据收件⼈⼀⼀分发给每
        // 个同学 在这⾥，取快递就是⼀个事件，每个同学指的是需要响应事件的 DOM 元素，⽽出去统⼀领取快递的宿舍⻓就是代理的元素

        // 事件流会经过3个阶段 捕获、目标、冒泡，事件委托就在冒泡阶段


        const lis = document.getElementsByTagName('li')
        console.log('lis',lis)
        // 如果给每个列表项⼀⼀都绑定⼀个函数，那对于内存消耗是⾮常⼤的
        // for(let i = 0; i < lis.length; i++){
        //     lis[i].onclick = function (e){
        //         console.log('E',e.target.innerHTML);
        //     }
        // }

        // 针对上面的改善来了
        document.getElementById('list').addEventListener('click',(e)=>{
            console.log('ee',e.target.innerHTML)
            // 兼容性处理
            // var event = e || window.event;
            // var target = event.target || event.srcElement;
            // // 判断是否匹配目标元素
            // if(target.nodeName.toLocaleLowerCase === 'li'){
            //     console.log('the content is', target.innerHTML);
            // }
        })

        

        // 标准案例2
        const oBtn = document.getElementById("btn");
        const oUl = document.getElementById("ul1"); // 父元素
        let num = 4;

        oUl.onclick = function (ev) {
            ev.target.innerHTML
            // ev = ev || window.event;
            // const target = ev.target || ev.srcElement;
            // if (target.nodeName.toLowerCase() == 'li') {
            // console.log('the content is: ', target.innerHTML);
            // }
        };
        //添加新节点
        oBtn.onclick = function () {
            num++;
            const oLi = document.createElement('li');
            oLi.innerHTML = `item ${num}`;
            oUl.appendChild(oLi);
        };

        // 适合事件委托的事件有: click,mousedown,mouseup,keydown,keyup,keypress---使用委托可以提高性能
        /**
         * 
         * 应用场景: 
         *    1. 动态内容加载 当你有一个列表或者表格，其中的项是通过 AJAX 或者其他方式动态加载的，使用事件委托可以确保新添加的项也能响应点击或其他事件，而不需要每次添加新项时都重新绑定事件
         *    2. 在一个复杂的表单中，如果有大量的输入框需要进行相同的验证逻辑，可以使用事件委托来监听整个表单的输入变化事件，然后根据触发事件的具体输入框来执行相应的验证逻辑
         *    3. 菜单交互 对于下拉菜单或上下文菜单等用户界面组件，通常会有多个菜单项。如果直接给每个菜单项添加事件监听器，在菜单项频繁更新的情况下会变得难以维护。使用事件委托可以在父级菜单元素上添加一个事件监听器，处理所有菜单项的点击事件
         * **/ 
    </script>
</body>
</html>